
<template id="waitPay">

  <div class="paidFee">
    <div class="searchBox">

      <form action="" class="searchForm">
        <input type="text" name="paidFreeSearch" id="paidFreeSearch" class="paidFreeSearch" v-model.trim="paidFreeSearch" ref="paidFreeSearch" @blur="isBlur">
        <div class="searchInfo" @click="getSearchInp">
          <i class="icon iconfont icon-search" v-show="isShowSearch">&#xe606;</i>
          <span v-show="isShowSearch">请输入缴费编号进行搜索</span>
          <i class="icon iconfont icon-back" @click="delVal" v-show="isShowDel">&#xe649;</i>
        </div>
      </form>


      <!--<div class="row paidFeeHeader">-->

        <!--<div class="col">-->
          <!--<template>-->
            <!--<div id="remember">-->

              <!--<mt-button size="small" type="default" @click="openPicker_s">{{pickerValue_s_s | textFormate}}</mt-button>-->

              <!--<mt-datetime-picker  @confirm="handleConfirm_s" ref="picker_s" type="date" v-model="pickerValue_s"></mt-datetime-picker>-->

            <!--</div>-->
          <!--</template>-->
        <!--</div>-->

        <!--<div class="col col-10 tz">至</div>-->

        <!--<div class="col">-->
          <!--<template>-->
            <!--<div id="remember22">-->
              <!--<mt-button size="small" type="default" @click="openPicker_e">{{pickerValue_e_e | textFormate}}</mt-button>-->

              <!--<mt-datetime-picker  @confirm="handleConfirm_e" ref="picker_e" type="date" v-model="pickerValue_e"></mt-datetime-picker>-->


            <!--</div>-->
          <!--</template>-->
        <!--</div>-->
      <!--</div>-->


      <!--<div class="row paidFeeHeader queryBtn">-->
        <!--<mt-button type="danger" size="small" @click="checkPayList">查询</mt-button>-->
      <!--</div>-->

      <div class="payFee_content">
        <div v-if="paidFeeData.length">
          <div class="payFee_item bg_ff" v-for="todo in paidFeeData" @click="goPage('/pay/Pay', todo)">
            <div class="row">
              <div class="col" >
                <p class="fs_13">{{todo.corpName}}</p>
                <div>
                  <span class="fs_11">应缴费用</span>
                  &nbsp;&nbsp;
                  <span class="fs_11 col_0ae">{{todo.totalAmt | formatNumber}}元</span>
                </div>
              </div>
              <div class="col tr col-25">
                <span class="payFee_item_btn">立即缴费</span>
              </div>
            </div>
            <div class="row">
              <div class="col fs_11">缴纳用户&nbsp;{{todo.feeUserName}}</div>
              <div class="col fs_11 tr">最后缴纳日期&nbsp;{{new Date(todo.endDate*1000) | textFormate}}</div>

            </div>
          </div>
        </div>
        <div v-else="" class="noPay_style">
          <no-data :noParams = 'noParams'></no-data>
        </div>
      </div>
    </div>


  </div>
</template>

<script>

   import Vue from 'vue'
  import noData from "../common/noData.vue";

  Vue.filter( 'textFormate' , function(value) {
    return value.Format('yyyy-MM-dd') ;
  });


  export default {
    components: {noData},

    data () {
      return {

        // pickerValue_s:new Date(new Date().setDate(new Date().getDate() - 7 )),
        // pickerValue_s_s: new Date(new Date().setDate(new Date().getDate() - 7 )),
        //
        // pickerValue_e:new Date(),
        // pickerValue_e_e: new Date(),



        isShowSearch:true,
        isShowDel:false,
        paidFreeSearch:'',
        // paidFeeData : [],
        paidFeeDataSS: [],

        noParams: {
          src: '../../../static/image/noFeeList.png',
          text: '亲，您当前暂无未缴费用哦～'
        }
      }
    },
    methods: {

      // handleConfirm_s: function () {
      //   this.pickerValue_s_s = this.pickerValue_s;
      // },
      //
      // handleConfirm_e: function () {
      //   this.pickerValue_e_e = this.pickerValue_e;
      // },
      //
      // openPicker_s() {
      //   this.$refs.picker_s.open();
      // },
      // openPicker_e() {
      //   this.$refs.picker_e.open();
      // },

      getSearchInp:function () {
        this.$refs.paidFreeSearch.focus()
        this.isShowSearch = false
        this.isShowDel = true
      },

      isBlur:function () {
        var _self=this;

          if(_self.paidFreeSearch == ''){
            _self.isShowSearch = true
            _self.isShowDel = false
          }


      },

      // //查询缴费列表接口
      // checkPayList: function () {
      //
      //   var that = this;
      //   var param = {
      //     feeId: this.paidFreeSearch,
      //     openAccount: sessionStorage.getItem('userId'),
      //     // beginDate: this.pickerValue_s_s.Format('yyyy-MM-dd'),
      //     // endDate: this.pickerValue_e_e.Format('yyyy-MM-dd')
      //   };
      //   //未缴费查询接口
      //   this.$post(this.$urlAll.query_delay_payment, param).then(function (response) {
      //
      //     that.paidFeeData = response.t.paymentList;
      //   });
      // },

      // validTest: function () {
      //   var testForm = true;
      //   if(this.pickerValue_s_s.getTime() >= this.pickerValue_e_e.getTime()){
      //     DbsAlert.show({
      //       title: '提示',
      //       text: '开始日期不能大于结束日期，请重新选择～'
      //     });
      //     return testForm = false;
      //   }
      //
      //   return testForm;
      // },


      delVal:function () {
        this.paidFreeSearch = ''
      },

      goPage: function (url, item) {
        this.$router.push({path: url, query: item})
      }



    },
    //获取后台数据，dom渲染之前
    created: function(){

      var options = {
        openAccount: sessionStorage.getItem('userId')
        // beginDate: this.pickerValue_s_s.Format('yyyy-MM-dd'),
        // endDate: this.pickerValue_e_e.Format('yyyy-MM-dd')
      };

      var that = this;

      //未缴费查询接口
      this.$post(this.$urlAll.query_delay_payment, options).then(function (response) {
        that.paidFeeDataSS = response.t.paymentList;
      });

    },


    computed: {
      paidFeeData: function() {
        var search = this.paidFreeSearch;

        if (search) {
          return this.paidFeeDataSS.filter(function(product) {
            return product.feeId.indexOf(search) > -1
            // return Object.keys(product).some(function(key) {
            //   return String(product[key]).toLowerCase().indexOf(search) > -1
            // })
          })
        }

        return this.paidFeeDataSS;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../style/common.css";
  @import "../../assets/css/iconfont.css";





  .queryBtn{
    display: flex;
    align-items: center;
  }

  button{
    width: 100%;
  }
  .paidFreeSearch{
    width: 3.24rem;
    height: 0.29rem;
    border: none;
    -webkit-border-radius:0.04rem;
    -moz-border-radius:0.04rem;
    border-radius:0.04rem;
    position: absolute;
    left: 50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0.1rem;
  }
  .searchBox{
    width: 100%;
    height: 0.44rem;
    position: relative;
  }
  .searchInfo {
    width: 3.24rem;
    height: 0.29rem;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
    line-height: 0.29rem;

  }
  .searchInfo span {
    font-size: 0.11rem;
    color: #999;
  }
  .icon-search{
    font-size: 0.14rem;
    padding-right: 0.06rem;
    color: #999;
  }
  .icon-back {
    position: absolute;
    right: 0.1rem;
    font-size: 0.14rem;
  }
  .paidFeeHeaderAll .date-sel{
    border:none;
    outline: none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    background-color: #ffffff;
  }
  .payFee_head{
    padding-left: 0.1rem;
    line-height: 0.44rem;
    color: #333;
    border-bottom: 1px solid #eee;
  }
  .payFee_item{
    padding: 0 0.1rem;
    margin-bottom: 0.05rem;
  }
  .payFee_item .row:first-child{
    padding: 0 0.2rem;
    height: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
  }
  .payFee_item_btn{
    width: 0.75rem;
    height: 0.26rem;
    border: 1px solid #c9c9c9;
    border-radius: 0.14rem;
    font-size: 0.11rem;
    display: inline-block;
    text-align: center;
    line-height: 0.26rem;
  }
  .payFee_item .row:last-child{
    padding: 0 0.2rem;
    height: 0.44rem;
    line-height: 0.44rem;
    color: #999;
  }

  .payFee_content{
    margin-top: 0;
  }
  .searchForm{
    height: 0.44rem;
  }

  .paidFeeHeader{
    height: 0.44rem;
    background-color: #fff;
    margin-bottom: 0.05rem;
    line-height: 0.44rem;
    padding: 0 0.1rem;
  }

  .paidFeeHeaderAll{
    position: absolute;
    right: 0.1rem;
  }
  .icon-all{
    font-size: 0.3rem;
    color: #666;
  }
  .paidFeeHeaderAllBtn{
    float: left;
    font-size: 0.14rem;
    color: #666;
  }
  .paidFeeHeaderTime{
    font-size: 0.14rem;
    color: #333;
  }
</style>
